<template>
  <div>
    <!-- 自建歌单歌曲显示 -->
    <nut-popup
      position="bottom"
      :style="{ height: '80%' }"
      v-model="show"
      @close="closelist(tname)"
    >
      <nut-cell :is-link="true" v-for="item in this.songs" :key="item.id" :desc="''+item.playCount">
        <span slot="title">{{item.song.name}} - {{item.song.ar[0].name}}</span>
      </nut-cell>
    </nut-popup>
  </div>
</template>
<script>
import { url, userrecord } from "../../api/api";
export default {
  props: ["history", "tname", "closelist"],
  data() {
    return {
      show: false,
      songs: [],
      num: ""
    };
  },
  mounted() {},
  methods: {
    //  获取历史记录
    gethistory() {
      this.$axios
        .get(`${url}${userrecord}`, {
          params: {
            uid: this.$store.state.user.id
          }
        })
        .then(
          data => {
            if (data.data.code == 200) {
              this.songs = data.data.allData;
            }
          },
          err => {
            this.$notify.danger(err.data.msg);
          }
        );
    }
  },
  watch: {
    history() {
      this.show = this.history;
      if (this.show == true) {
        this.gethistory();
      }
    }
  }
};
</script>
<style scoped>
.nut-cell-title span {
  display: inline-block;
  width: 300px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}
</style>